<style scoped>
</style>
<template>
    <div id='myApp'>
        <Row style="margin-bottom: 40px;border-bottom: 1px solid #eeeeee;">
            <Col span="7" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-add-circle" />&nbsp;&nbsp;
                <span style="color: black;">网站管理&nbsp;&nbsp;>&nbsp;&nbsp;API列表&nbsp;&nbsp;>&nbsp;</span>调用统计
            </span>
            </Col>
        </Row>
        <Row style="margin-bottom: 40px;">
            <Tabs value="name1">
                <TabPane :label="label1" name="name1">
                    <canvas id="dayChart" style="max-height: 700px;"></canvas>
                </TabPane>
                <TabPane :label="label2" name="name2">
                    <canvas id="weekChart" style="max-height: 700px;"></canvas>
                </TabPane>
                <TabPane :label="label3" name="name3">
                    <canvas id="monthChart" style="max-height: 700px;"></canvas>
                </TabPane>
                <TabPane :label="label4" name="name4">
                    <canvas id="yearChart" style="max-height: 700px;"></canvas>
                </TabPane>
            </Tabs>
        </Row 40px;>
        <Row>
            <Col span="10" offset="14">
                <!-- <DatePicker format="yyyy-MM-dd" valueFormat="yymmdd" type="date" placeholder="起始时间" style="width: 40%;" v-model="startTime">
                </DatePicker> -->
                <DatePicker format="yyyy-MM-dd" :value="startTime" @on-change="startTime1" type="date" placeholder="起始时间"
                    style="width: 38%;">
                </DatePicker>
                --
                <!-- <DatePicker format="yyyy-MM-dd"  type="date" placeholder="结束时间" style="width: 40%;" v-model="endTime">
                </DatePicker> -->
                <DatePicker format="yyyy-MM-dd" :value="endTime" @on-change="endTime1" type="date" placeholder="结束时间"
                    style="width: 38%;">
                </DatePicker>
                <Button type="primary">GO!</Button>
                </Col>
            <canvas id="threeMonthChart" style="max-height: 700px;"></canvas>
        </Row>


    </div>
</template>
<script>
    import { mapState, mapActions } from 'vuex'
    const dayChartData = {
        type: 'line',
        data: {
            labels: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
            datasets: [
                {
                    label: '今日用量',
                    borderWidth: 2,
                    data: [523,789, 1145, 2134, 2232, 1312, 1123, 2112, 1109, 1145, 934, 332, 112, 323, 690,1230,1509,1145, 2134, 2232, 1312, 1123, 2112, 1109],
                    backgroundColor: ['rgba(99,184,255,0.2)'],
                    borderColor: ['rgba(99,184,255,1)']
                }
            ]
        },
        options: {
            // ...
        }
    };
    const weekChartData = {
        type: 'line',
        data: {
            labels: ['周一','周二','周三','周四','周五','周六','周日',],
            datasets: [
                {
                    label: '本周用量',
                    borderWidth: 2,
                    data: [8523,9789, 15145, 12134, 13232, 11312, 9123],
                    backgroundColor: ['rgba(99,184,255,0.2)'],
                    borderColor: ['rgba(99,184,255,1)']
                }
            ]
        },
        options: {
            // ...
        }
    };
    const monthChartData = {
        type: 'line',
        data: {
            labels: ['1日','5日','10日','15日','20日','25日','30日',],
            datasets: [
                {
                    label: '本月用量',
                    borderWidth: 2,
                    data: [512345,493789, 461145, 492134, 502232, 471312, 461123],
                    backgroundColor: ['rgba(99,184,255,0.2)'],
                    borderColor: ['rgba(99,184,255,1)']
                }
            ]
        },
        options: {
            // ...
        }
    };
    const yearChartData = {
        type: 'line',
        data: {
            labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            datasets: [
                {
                    label: '本年用量',
                    data: [123456,234567,365839,305678,456789,478097,523456,624628,524382,426392,403839,382739],
                    backgroundColor: ['rgba(99,184,255,0.2)'],
                    borderColor: ['rgba(99,184,255,1)'],
                    borderWidth: 2
                }
            ]
        },
        options: {
            // ...
            
        }
    };
    const threeMonthChartData = {
        type: 'line',
        data: {
            labels: ['09-25', '09-26', '09-27', '09-28', '09-29', '09-30', '10-01', '10-02', '10-03', '10-04', '10-05', '10-06','10-07', '10-08', '10-09', '10-10', '10-11', '10-12',],
            datasets: [
                {
                    label: '最近三个月用量',
                    data: [8523,9789, 15145, 12134, 13232, 11312, 9123,8523,9789, 15145, 12134, 13232, 11312, 9123,8523,9789, 15145, 12134, 13232, 11312, 9123],
                    backgroundColor: ['rgba(162,205,90,0.2)'],
                    borderColor: ['rgba(162,205,90,1)'],
                    borderWidth: 2
                }
            ]
        },
        options: {
            // ...
             bezierCurve: false
        }
    };
    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),
        data() {
            return {
                label1: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                fontWeight: 'bold'
                            },
                            on: {
                                click: () => {
                                    let data = this.$qs.stringify({
                                        token: this.Authorization,
                                        startDate: ''
                                    })
                                    //向后台发送请求24小时数据
                                    this.$axios
                                        .get('api/stats/scan_count.json', data)
                                        .then(response => {
                                            let res = response.data
                                            if (res.code == 0) {
                                                console.log(res)
                                                //24小时图表的labels
                                                dayChartData.data.labels = res.data.scanCount.hours
                                                //24小时的扫描页面数
                                                dayChartData.data.datasets[0].data = res.data.scanCount.hoursCounts
                                                //24小时的拼写错误数
                                                dayChartData.data.datasets[1].data = res.data.spellErrorCount.hoursCounts
                                                //24小时的http错误数
                                                dayChartData.data.datasets[2].data = res.data.httpErrorCount.hoursCounts

                                                this.createChart('dayChart', this.dayChartData)
                                            } else {
                                                this.$Message.error('初始化失败，请刷新当前页面！')
                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error)
                                        });
                                }
                            }
                        }, '今日调用')
                    ])
                },
                label2: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                fontWeight: 'bold'
                            },
                            on: {
                                click: () => {
                                    let data = this.$qs.stringify({
                                        token: this.Authorization,
                                        startDate: ''
                                    })
                                    //向后台发送请求一周数据
                                    this.$axios
                                        .get('api/stats/scan_count.json', data)
                                        .then(response => {
                                            let res = response.data
                                            if (res.code == 0) {
                                                console.log(res)
                                                //近1周图表的labels
                                                weekChartData.data.labels = res.data.scanCount.days
                                                //近1周的扫描页面数
                                                weekChartData.data.datasets[0].data = res.data.scanCount.daysCounts
                                                //近1周的拼写错误数
                                                weekChartData.data.datasets[1].data = res.data.spellErrorCount.daysCounts
                                                //近1周的http错误数
                                                weekChartData.data.datasets[2].data = res.data.httpErrorCount.daysCounts

                                                this.createChart('weekChart', this.weekChartData)
                                            } else {
                                                this.$Message.error('初始化失败，请刷新当前页面！')
                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error)
                                        });
                                }
                            }
                        }, '本周调用')
                    ])
                },
                label3: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                fontWeight: 'bold'
                            },
                            on: {
                                click: () => {
                                    let data = this.$qs.stringify({
                                        token: this.Authorization,
                                        startDate: this.getLastMonthDate()
                                    })
                                    //向后台发送请求一月数据
                                    this.$axios({
                                        method: 'get',
                                        url: 'api/stats/scan_count.json',
                                        params: {
                                            token: this.Authorization,
                                            startDate: this.getLastMonthDate()
                                        }
                                    })
                                        // .get('api/stats/scan_count.json', data)
                                        .then(response => {
                                            let res = response.data
                                            if (res.code == 0) {
                                                console.log(res)
                                                //近1月图表的labels
                                                monthChartData.data.labels = res.data.scanCount.days
                                                //近1月的扫描页面数
                                                monthChartData.data.datasets[0].data = res.data.scanCount.daysCounts
                                                //近1月的拼写错误数
                                                monthChartData.data.datasets[1].data = res.data.spellErrorCount.daysCounts
                                                //近1月的http错误数
                                                monthChartData.data.datasets[2].data = res.data.httpErrorCount.daysCounts

                                                this.createChart('monthChart', this.monthChartData)
                                            } else {
                                                this.$Message.error('初始化失败，请刷新当前页面！')
                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error)
                                        });
                                }
                            }
                        }, '本月调用')
                    ])
                },
                label4: (h) => {
                    return h('div', [
                        h('span', {
                            style: {
                                fontWeight: 'bold'
                            },
                            on: {
                                click: () => {
                                    let data = this.$qs.stringify({
                                        token: this.Authorization,
                                        startDate: this.getLastMonthDate()
                                    })
                                    //向后台发送请求一月数据
                                    this.$axios({
                                        method: 'get',
                                        url: 'api/stats/scan_count.json',
                                        params: {
                                            token: this.Authorization,
                                            startDate: this.getLastMonthDate()
                                        }
                                    })
                                        // .get('api/stats/scan_count.json', data)
                                        .then(response => {
                                            let res = response.data
                                            if (res.code == 0) {
                                                console.log(res)
                                                //近1月图表的labels
                                                monthChartData.data.labels = res.data.scanCount.days
                                                //近1月的扫描页面数
                                                monthChartData.data.datasets[0].data = res.data.scanCount.daysCounts
                                                //近1月的拼写错误数
                                                monthChartData.data.datasets[1].data = res.data.spellErrorCount.daysCounts
                                                //近1月的http错误数
                                                monthChartData.data.datasets[2].data = res.data.httpErrorCount.daysCounts

                                                this.createChart('monthChart', this.monthChartData)
                                            } else {
                                                this.$Message.error('初始化失败，请刷新当前页面！')
                                            }
                                        })
                                        .catch(function (error) {
                                            console.log(error)
                                        });
                                }
                            }
                        }, '今年调用')
                    ])
                },
            }
        },
        mounted() {
            this.createChart('dayChart', dayChartData)
            this.createChart('weekChart', weekChartData)
            this.createChart('monthChart', monthChartData)
            this.createChart('yearChart', yearChartData)
            this.createChart('threeMonthChart', threeMonthChartData)
        },
        methods: {
            createChart(chartId, chartData) {
                const ctx = document.getElementById(chartId);
                const { type, data, options } = chartData;
                const myChart = new Chart(ctx, {
                    type: type,
                    data: data,
                    options: options,
                });
            }
        }
    }
</script>